<template>
  <div class="header-wrapper">
    <section class="logo-wrapper">
      <img src="../assets/images/logo.png" alt="logo" width="77" height="86">
      <p>MG Supplier Portal</p>
    </section>

    <Dropdown class="account-wrapper">
      <a href="javascript:void(0)" class="account-cnt" v-if="!!userInfo">
        Hi, {{userInfo.username}}
        <Icon type="arrow-down-b"></Icon>
      </a>
      <DropdownMenu slot="list" trigger="click" class="account-dropdown">
        <DropdownItem class="dropdown-item"><router-link to="/account-set">Account Set</router-link></DropdownItem>
        <DropdownItem class="dropdown-item"><p @click="logoutFun">Logout</p></DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>

<script>
  import { mapState, mapMutations, mapActions } from 'vuex';
  import { logout } from '@/api/index';
  export default {
    name: 'HeaderNav',
    data () {
      return {
      }
    },
    props: ['loginHeader','pageHeader'],
    computed: {
      ...mapState(['userInfo'])
    },
    created () {
      this.getUserInfo();
    },
    methods: {
      ...mapActions(['getUserInfo']),
      ...mapMutations([ 'LOGOUT' ]),
      async logoutFun () {
      	await logout().then(res => {
          if (res.data.status == 1) {
            this.$Message.success(res.data.msg);
            this.LOGOUT();
            this.$router.push('/login');
          }
        })
      }
    },
    watch: {
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  @import '../assets/sass/mixin';
  .header-wrapper {
    @include fj;
    padding: 0 35px;
    height: 80px;
    color: #fff;
    background-color: #363e4f;
    border-bottom: 1px solid #555;
  }
  .logo-wrapper {
    @include fj(flex-start);
    img {
      width: 55px;
      margin-right: 5px;
      height: auto;
    }
    p {
      text-align: left;
      text-transform: uppercase;
      font-size: 20px;
      font-weight: bold;
      text-shadow: 1px 1px 1px #000;
    }
  }
  .account-cnt {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    .ivu-icon-arrow-down-b {
      margin-left: 7px;
    }
  }
  .dropdown-item {
    p, a {
      display: block;
      color: #495060;
      padding: 5px 10px;
      font-size: 14px;
    }
  }
</style>
